<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="referrer" content="origin">
    <meta name="theme-color" content="#ffffff" />
    <link rel="icon" href="icon/icon32.svg" sizes="280x280" />
    <link rel="apple-touch-icon-precomposed" href="icon/icon32.svg" />
    <meta name="msapplication-TileImage" content="icon/icon32.svg" />
    <link rel="shortcut icon" href="icon/icon.svg" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="full-screen" content="yes" />
    <meta name="browsermode" content="application" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="x5-page-mode" content="app" />
    <title>极简主页导航</title>
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href=".//css/weather.css" />
    <script src="./js/jquery.min.js"></script>
    <script src="./js/font.js"></script>
    <script src="https://at.alicdn.com/t/font_2419460_cng8xyv92iw.js"></script>
    <script src="./js/index_ency.js"></script>
  </head>

  <body>
    <div id="app" :style="backgroundDiv">
      <div id="menu">
        <i></i>
      </div>
      <div class="list closed">
        <div class="huanfu">
          <img
            src="./icon/huanfu.svg"
            alt=""
            srcset=""
            width="30px"
            @click="changeBgcImg"
          />
          <img
            src="./icon/guding.svg"
            alt=""
            srcset=""
            width="30px"
            @click="guding"
          />
        </div>
        <ul>
          <!-- 导航列表 -->
          <div :key="item.id" v-for="(item, index) in tag_list" class="nav">
            <div class="tagtitle">
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="item.icon"></use>
              </svg>
              {{item.title}}
            </div>
            <!-- 循环分类 -->
            <li :key="item.index" v-for="(items, indexs) in item.list">
              <a rel="nofollow" :href="items.url" target="_blank"
                ><svg class="icon" aria-hidden="true">
                  <use :xlink:href="items.icon"></use>
                </svg>
                {{items.title}}</a
              >
            </li>

            <div style="clear: both"></div>
          </div>
        </ul>
      </div>
      <!--天气-基于和风天气接口-->
      <div class="mywth">
        <div class="wea_hover">
          <div class="wea_in wea_top"></div>
          <!-- <div class="wea_in wea_con">
          <ul>
            天气
          </ul>
        </div>
        <div class="wea_in wea_foot">
          <ul></ul>
        </div> -->
        </div>
      </div>
      <!-- 中间 -->
      <div id="content">
        <div class="con">
          <div class="shlogo">
            <img src="./icon/icon128.svg" alt="" srcset="" />
          </div>
          <div class="sou">
            <form>
              <div
                class="lg"
                style="background: url(icon/baidu.svg) no-repeat center/cover"
              ></div>
              <!--input class="t" type="text" value="" name="t" hidden-->
              <input
                class="wd"
                type="text"
                placeholder="请输入搜索内容"
                name="q"
                x-webkit-speech
                lang="zh-CN"
                autocomplete="off"
                v-model="kewords"
              />
              <button @click="gosou">
                <svg
                  class="icon"
                  style="width: 21px; height: 21px; opacity: 0.5"
                  aria-hidden="true"
                >
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
              </button>
            </form>
            <div id="word"></div>
          </div>
          <!-- 精选收藏 -->
          <div class="favorite">
            <ul>
              <li :key="item.id" v-for="(item, index) in favoritearr" >
                <div class="favoriteicon">
                  <img src="./img/caidan.svg" alt="" class="itemcaidan" @click='removefavorite(index)'>
                  <a rel="nofollow" :href="item.url" target="_blank"
                  ><img :src="item.icon" alt="" srcset="">
                  <div class="favoritetitle">{{item.title}}</div>
                 </a
                </div>
              </li>
              <li>
                <div class="favoriteiconadd">
                  <svg class="icon" aria-hidden="true"  @click='addfavoritebox=true' style="cursor: pointer;">
                    <use xlink:href="#icon-jia"></use>
                  </svg>
               
                <div class="addfavoritebox" v-if=addfavoritebox>
                  <svg 
                  @click='addfavoritebox=0'
                   class="icon" aria-hidden="true" style="color: #757070;
                   position: absolute;
                   right: 0;
                   top: -26px;
                  cursor: pointer;"
                  >
                    <use xlink:href="#icon-cancel"></use>
                  </svg>
                  <div style="color: rgb(76, 69, 69); height: 40px;  font-weight: 700; line-height: 40px; "><span>添加精选标签</span></div>
                  <input type="text" placeholder="请输入标签名" v-model='addtitle'>
                  <input type="text" placeholder="https://baidu.com"  v-model='addurl'>
                  <input type="button" value="提交" style="margin-bottom: 10px;  background: #29f; cursor: pointer;color:#fff;   width: 97%;" @click='addfavorite'>
                  <span style="color: #5e9abd;

                  line-height: 8px;
                  font-size: 7px;">个别特殊图标显示不了,请底部联系小文!</span>
                </div>
              </div>
              </li>
            </ul>
          </div>
        </div>
    
        <div class="foot">
          <a href="http://justwen233.cn/" style="color: #f1f1f1">校园社区</a> |
          <a href="https://navigation.mangoroom.cn/" style="color: #f1f1f1">芒果导航</a> |
          <a href="" style="color: #f1f1f1">链接1</a> |
          <a href="" style="color: #f1f1f1">链接1</a>|
          <a target="_blank" href="https://wpa.qq.com/msgrd?v=3&uin=2422142078&site=qq&menu=yes" style="color: #f1f1f1">联系小文(2422142078)</a>
          <br>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript">
      var vm = new Vue({
        el: "#app",
        data: {
          kewords: "",
          backgroundDiv: {},
          bgcImg: [],
          bgcurl: "",
          addfavoritebox:false,
          favoritearr:[],
          addtitle:'',
          addurl:'',
          tag_list: [
            {
              title: "搜索引擎",
              icon: "#icon-sousuo",
              list: [
                {
                  title: "Google",
                  icon: "#icon-google",
                  url: "https://www.google.com/",
                },
                {
                  title: "Bing",
                  icon: "#icon-bing",
                  url: "https://www.bing.com/",
                },
                {
                  title: "DuckGo",
                  icon: "#icon-duck",
                  url: "https://duckduckgo.com/",
                },
                {
                  title: "雅虎",
                  icon: "#icon-yahoo",
                  url: "https://hk.yahoo.com/",
                },
                {
                  title: "搜狗",
                  icon: "#icon-sougou",
                  url: "https://www.sogou.com/",
                },
                {
                  title: "NAVER",
                  icon: "#icon-icon-test",
                  url: "https://www.naver.com/",
                },
                {
                  title: "秘迹",
                  icon: "#icon-miji",
                  url: "https://mijisou.com/",
                },
                {
                  title: "seeres",
                  icon: "#icon-sousuo",
                  url: "https://seeres.com/",
                },
              ],
            },
            {
              title: "视频媒体",
              icon: "#icon-shipin",
              list: [
                {
                  title: "腾讯视频",
                  icon: "#icon-tengxunshipin",
                  url: "https://v.qq.com/",
                },
                {
                  title: "爱奇艺",
                  icon: "#icon-aiqiyi",
                  url: "https://www.iqiyi.com/",
                },
                {
                  title: "优酷",
                  icon: "#icon-youku",
                  url: "https://www.youku.com/",
                },
                {
                  title: "哔哩哔哩",
                  icon: "#icon-bili",
                  url: "https://www.bilibili.com/",
                },
                {
                  title: "斗鱼",
                  icon: "#icon-douyu-",
                  url: "https://www.douyu.com/",
                },
                {
                  title: "虎牙",
                  icon: "#icon-huya",
                  url: "https://www.huya.com/",
                },
                {
                  title: "Youtube",
                  icon: "#icon-youtube",
                  url: "https://www.youtube.com/",
                },
                {
                  title: "ACFUN",
                  icon: "#icon-acfun",
                  url: "http://www.acfun.cn/index.html",
                },
                {
                  title: "奈非影视",
                  icon: "#icon-netflix",
                  url: "https://www.nfmovies.com/",
                },
                {
                  title: "K1080",
                  icon: "#icon-yingshi",
                  url: "https://k1080.net/",
                },
                {
                  title: "云播TV",
                  icon: "#icon-yunbo",
                  url: "https://www.yunbtv.com/",
                },
              ],
            },
            {
              title: "邮箱",
              icon: "#icon-youxiang",
              list: [
                {
                  title: "Gmail",
                  icon: "#icon-gmail",
                  url: "https://mail.google.com/mail/u/0/#inbox",
                },
                {
                  title: "QQ邮箱",
                  icon: "#icon-QQ",
                  url: "https://mail.qq.com/",
                },
                {
                  title: "网易邮箱",
                  icon: "#icon-wangyi",
                  url: "https://mail.163.com/",
                },
                {
                  title: "Hotmail",
                  icon: "#icon-windows",
                  url: "https://outlook.live.com/mail/",
                },
                {
                  title: "新浪邮箱",
                  icon: "#icon-xinlangwang",
                  url: "https://mail.sina.com.cn/",
                },

                {
                  title: "阿里邮箱",
                  icon: "#icon-yunyouxiang",
                  url: "https://qiye.aliyun.com/",
                },
              ],
            },
            {
              title: "社交资讯",
              icon: "#icon-msg",
              list: [
                {
                  title: "微博",
                  icon: "#icon-weibo",
                  url: "https://www.weibo.com/",
                },
                {
                  title: "知乎",
                  icon: "#icon-zhihu",
                  url: "https://www.zhihu.com/",
                },
                {
                  title: "豆瓣",
                  icon: "#icon-douban",
                  url: "https://www.douban.com/",
                },
                {
                  title: "简书",
                  icon: "#icon-jianshu",
                  url: "https://www.jianshu.com/",
                },
                {
                  title: "V2EX",
                  icon: "#icon-v2ex",
                  url: "https://www.v2ex.com/",
                },
                {
                  title: "Instagram",
                  icon: "#icon-instagram",
                  url: "https://www.instagram.com/",
                },
                {
                  title: "Twitter",
                  icon: "#icon-twitter",
                  url: "https://www.twitter.com/",
                },
                {
                  title: "Facebook",
                  icon: "#icon-facebook",
                  url: "https://www.facebook.com/",
                },
              ],
            },
            {
              title: "购物",
              icon: "#icon-gouwuche",
              list: [
                {
                  title: "淘宝网",
                  icon: "#icon-taobao",
                  url: "https://www.taobao.com/",
                },
                {
                  title: "京东",
                  icon: "#icon-jingdong",
                  url: "https://www.jd.com/",
                },
                {
                  title: "拼多多",
                  icon: "#icon-99",
                  url:
                    "https://mobile.yangkeduo.com/duo_cms_mall.html?pid=8742514_71211367&cpsSign=CM_190605_8742514_71211367_92fdd9f7fb637fec599bf556f263ed1f&duoduo_type=2&launch_wx=1",
                },
                {
                  title: "苏宁易购",
                  icon: "#icon-suning",
                  url: "https://www.suning.com/",
                },
                {
                  title: "亚马逊",
                  icon: "#icon-amazon",
                  url: "https://www.amazon.cn/",
                },
                {
                  title: "当当",
                  icon: "#icon-dangdang",
                  url: "http://www.dangdang.com/",
                },
                {
                  title: "聚划算",
                  icon: "#icon-juhuasuan",
                  url: "https://dyartstyle.com/juhuasuan/",
                },
                {
                  title: "淘宝特卖",
                  icon: "#icon-temai",
                  url: "https://dyartstyle.com/temai/",
                },
              ],
            },
            {
              title: "设计视觉",
              icon: "#icon-sheji",
              list: [
                {
                  title: "阿里图标",
                  icon: "#icon-iconfont",
                  url: "https://www.iconfont.cn/",
                },
                {
                  title: "IconFinder",
                  icon: "#icon-jiaocheng",
                  url: "https://uiiiuiii.com/",
                },
                {
                  title: "Behance",
                  icon: "#icon-behance",
                  url: "https://www.behance.net/",
                },
                {
                  title: "设计导航",
                  icon: "#icon-daohang1",
                  url: "https://hao.5iux.cn/",
                },
                {
                  title: "酷家乐",
                  icon: "#icon-zhanku",
                  url: "https://yun.kujiale.com/",
                },
                {
                  title: "Pinterest",
                  icon: "#icon-pinterest",
                  url: "https://www.pinterest.com/",
                },
              ],
            },

            {
              title: "实用工具",
              icon: "#icon-",
              list: [
                {
                  title: "Miku工具",
                  icon: "#icon-ai-tool",
                  url: "https://tools.miku.ac/",
                },
                {
                  title: "IP查询",
                  icon: "#icon-wangluo",
                  url: "https://www.ip.cn/",
                },
                {
                  title: "谷歌翻译",
                  icon: "#icon-fanyi",
                  url: "https://translate.google.cn/?hl=zh-CN",
                },
                {
                  title: "史莱姆",
                  icon: "#icon-shilaimu",
                  url: "http://www.slimego.cn/",
                },
                {
                  title: "Feedly",
                  icon: "#icon-feedly",
                  url: "https://feedly.com/",
                },
                {
                  title: "百度网盘",
                  icon: "#icon-baiduyun",
                  url: "https://pan.baidu.com/",
                },
                {
                  title: "JS混淆器",
                  icon: "#icon-jshunxiao",
                  url:
                    "https://javascriptobfuscator.com/Javascript-Obfuscator.aspx",
                },
                {
                  title: "站长Ping",
                  icon: "#icon-pingup",
                  url: "https://ping.chinaz.com/",
                },
              ],
            },
            {
              title: "开发必备",
              icon: "#icon-kongzhitai",
              list: [
                {
                  title: "W3school",
                  icon: "#icon-h5",
                  url: "http://www.w3school.com.cn/",
                },
                {
                  title: "Github",
                  icon: "#icon-github",
                  url: "https://github.com/",
                },
                {
                  title: "Codepen",
                  icon: "#icon-codepen",
                  url: "https://codepen.io/",
                },
                {
                  title: "吾爱破解",
                  icon: "#icon-theater-masks",
                  url: "https://www.52pojie.cn/",
                },
                {
                  title: "SF思否",
                  icon: "#icon-msg",
                  url: "https://segmentfault.com/",
                },
                {
                  title: "CdnJs",
                  icon: "#icon-cdnjs",
                  url: "https://cdnjs.com/",
                },
                {
                  title: "nofollow",
                  icon: "#icon-font-awesome",
                  url: "https://fontawesome.com/icons?d=gallery&m=free",
                },
                {
                  title: "MSDN下载",
                  icon: "#icon-windows",
                  url: "https://msdn.itellyou.cn/",
                },
                {
                  title: "C. flare",
                  icon: "#icon-cloudflare",
                  url: "https://dash.cloudflare.com/",
                },
                {
                  title: "Swiper",
                  icon: "#icon-S",
                  url: "https://www.swiper.com.cn/",
                },
              ],
            },
          ],
        },
        created: function () {
        var  localStoragearr= JSON.parse(localStorage.getItem('favoritearr'));
        if(localStoragearr){
          this.favoritearr=localStoragearr
        }
          var bgcurl = localStorage.getItem("bgcurl"); //获取名称为“key”的值
          if (!bgcurl) {
            //设置默认壁纸
            this.backgroundDiv = {
              backgroundImage: "url(./img/01.jpg)",
              backgroundRepeat: "no-repeat center/cover",
              backgroundSize: "100% 100%",
              height: "100%",
              width: "100%",
            };
            // //获取壁纸;
            // $.get("http://justwen233.cn:8088/bingbgc", (res) => {
            //   for (let i = 0; i < res.images.length; i++) {
            //     this.bgcImg.push("https://cn.bing.com" + res.images[i].url);
            //   }
            //  
            // });
          } else {
            this.backgroundDiv = {
              backgroundImage: "url(" + bgcurl + ")",
              backgroundRepeat: "no-repeat center/cover",
              backgroundSize: "100% 100%",
              height: "100%",
              width: "100%",
            };
          }
        },
        methods: {

          // 条件精选
          addfavorite:function(){
       
           $.post('https://navapi.justwen233.cn/getWebicon',{url:this.addurl},res=>{
             console.log(res);
             var obj={};
             if(this.addurl.indexOf('http://')>-1){
               // console.log('已经有http://');
            }else if(this.addurl.indexOf('https://')>-1){
               // console.log('已经有https://');
           }else{
             // console.log('没有加头');
             this.addurl='http://'+this.addurl
              }
             if(res.code==200){
               obj={
                  title:this.addtitle,
                  url: this.addurl,
                  icon: res.iconurl
                }
             }else{
              obj={
                  title:this.addtitle,
                  url: this.addurl,
                  icon: 'https://nav.justwen233.cn/icon/icon64.png'
                }
             }
         
            this.favoritearr.push(obj)
            this. addfavoritebox=false
            localStorage.setItem('favoritearr',JSON.stringify(this.favoritearr));
           })

          },
         
         //删除精选
          removefavorite:function(index){
        console.log(index);
        this.favoritearr.splice(index, 1);
        localStorage.setItem('favoritearr',JSON.stringify(this.favoritearr));
          },
          
          //搜索
          gosou: function () {
            open("https://www.baidu.com/s?wd=" + this.kewords);
          },

          //固定背景
          guding: function () {
            localStorage.setItem("bgcurl", this.bgcurl); //以“key”为名称存储一个值“value”
          },

          //更换背景
          changeBgcImg: function () {
            if (this.bgcImg.length == 0) {
              $.get("https://navapi.justwen233.cn/bingbgc", (res) => {
                for (let i = 0; i < res.images.length; i++) {
                  this.bgcImg.push("https://cn.bing.com" + res.images[i].url);
                }
                var x = Math.floor(Math.random() * 8);
                this.bgcurl = this.bgcImg[x];
                this.backgroundDiv = {
                  backgroundImage: "url(" + this.bgcImg[x] + ")",
                  backgroundRepeat: "no-repeat center/cover",
                  backgroundSize: "100% 100%",
                  height: "100%",
                  width: "100%",
                };
              });
            } else {
              var x = Math.floor(Math.random() * 8);
              this.bgcurl = this.bgcImg[x];
              this.backgroundDiv = {
                backgroundImage: "url(" + this.bgcImg[x] + ")",
                backgroundRepeat: "no-repeat center/cover",
                backgroundSize: "100% 100%",
                height: "100%",
                width: "100%",
              };
            }
          },
        },
      });
    </script>
  </body>
  <!-- 百度统计 -->
  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?10e43682ef24d13528c97f6d009a3315";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
    
</html>
